<template>
  <div class="b-s w-10 f-48">
    <div class="w-10 flex-c base-title">
      请完善您的基本信息
    </div>
    <!--====================关于我们==========================-->
    <div class="block-ct">
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>参保人</div>
          <div class="f-39 img-ct">
            <input type="text"  v-model="accountInfo.username" maxlength="11" class="cm-input" placeholder="姓名" />
          </div>
        </div>
      </div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>参保城市</div>
          <div class="f-39 img-ct">
            <input type="text"  v-model="accountInfo.businessCity" maxlength="11" class="cm-input" placeholder="参保城市" />
          </div>
        </div>
      </div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>参保地区</div>
          <div class="f-39 img-ct">
              <input type="text"  v-model="accountInfo.businessTown" maxlength="11" class="cm-input" placeholder="参保地区" />
          </div>
        </div>
      </div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>邮箱地址</div>
          <div class="f-39 img-ct">
              <input type="email"  v-model="accountInfo.email" class="cm-input" placeholder="邮箱地址" />
          </div>
        </div>
      </div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>身份证</div>
          <div class="f-39 img-ct">
              <input type="text"  v-model="accountInfo.idcardNumber" maxlength="19" class="cm-input" placeholder="身份证" />
          </div>
        </div>
      </div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>户口类型</div>
          <div class="f-39 flex-c img-ct" @click="showRadios">
            {{accountInfo.residenceType|residenceTypeFilter}}
              <!-- <input type="text"  v-model="accountInfo.residenceType" maxlength="11" class="cm-input" placeholder="户口类型" /> -->
                <img src="/static/images/arr-down.png" class="arr-down" />
          </div>
        </div>
      </div>
      <!-- <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>社保缴纳基数</div>
          <div class="f-39 img-ct">
              <input type="text"  v-model="accountInfo.basePay" maxlength="11" class="cm-input" placeholder="社保缴纳基数" />
          </div>
        </div>
      </div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>公积金缴纳基数</div>
          <div class="f-39 img-ct">
              <input type="text"  v-model="accountInfo.basePay" maxlength="11" class="cm-input" placeholder="公积金缴纳基数" />
          </div>
        </div>
      </div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>薪水</div>
          <div class="f-39 img-ct">
              <input type="text"  v-model="accountInfo.salary" maxlength="11" class="cm-input" placeholder="薪水" />
          </div>
        </div>
      </div> -->
      <!-- <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>优惠金额</div>
          <div class="f-39 img-ct">
              <input type="text"  v-model="accountInfo.discountMoney" maxlength="11" class="cm-input" placeholder="优惠金额" />
          </div>
        </div>
      </div> -->
    </div>
    <!--===================================================-->
    <div class="w-10 btn-ct">
      <div class="cm-btn login-btn" @click="updateAccountInfo">保存</div>
    </div>
    <radioList
      v-if="oRadio.isShowRadio"
      @chooseResult="chooseResult"
      :collection="oRadio.radioCol"
      :iType="oRadio.radioType"
      :selected="oRadio.selected"
    ></radioList>
  </div>
</template>

<script>
import sowingMap from '@/components/common/sowingMap'
import { mixinParams } from '@/vmixin/vmixin'
import radioList from '@/components/common/radio-list.vue'
import {getAccountInfo, updateAccountInfo} from '@/service'
export default {
  data () {
    return {
      accountInfo: {}, // 获取账户信息
      memberPhone: '',
      userName: '张编辑',
      email: '',
      joinLocation: '北京海淀区',
      oRadio: {
        selected: '', // 被选中
        radioType: '', // 弹出radio类型
        isShowRadio: false, // 是否显示弹框集合
        radioCol: [] // 当前的radio集合
      },
      aResidenceType: [
        { iKey: 0, iName: '-请选择-' },
        { iKey: 1, iName: '本地城镇' },
        { iKey: 2, iName: '本地农村' },
        { iKey: 3, iName: '外地城镇' },
        { iKey: 4, iName: '外地农村' },
        { iKey: 5, iName: '外籍人员' }
      ]
    }
  },
  created () {
    this.getAccountInfo()
  },
  mounted () {},
  filters: {
    // 户口类型
    residenceTypeFilter: function (input) {
      let residenceType = ~~input
      let result = ''
      switch (residenceType) {
        case 1:result = '本地城镇'; break
        case 2:result = '本地农村'; break
        case 3:result = '外地城镇'; break
        case 4:result = '外地农村'; break
        case 5:result = '外籍人员'; break
        default:break
      }
      return result
    }
  },
  mixins: [mixinParams],
  components: {
    sowingMap,
    radioList
  },

  computed: {
    // 将获取的数据按照A-Z字母开头排序
    areaFilter () {
      let {businessCity: businessCity = '', businessTtown: businessTtown = ''} = this.accountInfo
      return businessCity + businessTtown
    }
  },
  methods: {
    navToHello () {
      this.navTo('/hello')
    },
    async getAccountInfo () {
      let {userInfo} = this
      let oParams = {
        mobile: userInfo.mobile,
        cdkey: this.getCdkey()
      }
      let resultInfo = await getAccountInfo(oParams)
      console.log('accountResult===aaaaaa====', resultInfo, typeof (resultInfo))
      // if (typeof (resultInfo) === 'string') {
      //   resultInfo = JSON.parse(resultInfo)
      // }
      this.accountInfo = resultInfo.values || {}
    },
    async updateAccountInfo () {
      let {userInfo, accountInfo} = this
      let oParams = {
        mobile: userInfo.mobile,
        cdkey: this.getCdkey(),
        userName: accountInfo.username,
        username: accountInfo.username,
        email: accountInfo.email,
        businessCity: accountInfo.businessCity || '北京', // 参保城市
        businessTown: accountInfo.businessTown || '朝阳区', // 参保地区
        idcardNumber: accountInfo.idcardNumber, // 身份证号
        residenceType: accountInfo.residenceType, // 户口类型
        basePay: accountInfo.basePay, // 缴纳基数
        salary: accountInfo.salary
      }
      let {result} = await updateAccountInfo(oParams)
      if (result !== 1) {
        return false
      }
      this.$vux.toast.show({
        text: '更新成功',
        type: 'success'
      })
      setTimeout(() => {
        this.navTo('/socialInfo')
      }, 2000)
    },
    // 退出登录
    flogout () {
      console.log('退出登录')
    },
    showRadios (iType, index) {
      let selected = ~~this.accountInfo.residenceType
      console.log('selected=========', selected, typeof (selected))
      // let aCols = this.aResidenceType
      this.oRadio = {
        selected: selected,
        radioType: iType,
        radioCol: this.aResidenceType,
        isShowRadio: true
      }
    },
    chooseResult (result, iType) {
      // let aColType = ['residence', 'social', 'fund', 'wages']
      // let indexType = this.indexType
      let accountInfo = {}
      Object.assign(accountInfo, this.accountInfo)
      accountInfo.residenceType = result.iKey
      this.accountInfo = accountInfo
      this.oRadio.isShowRadio = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.cm-input{
  text-align: right;
}
.base-title{
 color:#69c16a;
 padding:cmSize(60) 0 cmSize(40) 0;
}
.block-ct {
  margin-bottom: cmSize(40);
  background: #ffffff;
}
.edit-icon {
  width: cmSize(50);
  height: cmSize(50);
  vertical-align: middle;
  padding-right: cmSize(20);
}
.item-ct {
  height: cmSize(160);
  padding: 0 cmSize(60);
}
.item-ct:not(:last-child){
 border-bottom: 1px solid #eeeeee;
}
.name-ct {
          height: cmSize(160);
          flex: 1 1 3rem;
}
.s-item{
   padding:cmSize(40) cmSize(60);
   height: auto;
}
.last-item{
 padding: cmSize(10) 0;
}

.c-green {
  color: #69c16a;
}
.title {
  background-color: #69c16a;
  color: #ffffff;
  height: cmSize(120);
}
.line {
  border-bottom: 1px solid #eeeeee;
  width: 100%;
}
.btn-ct{
    padding: cmSize(60);
}
</style>
